<!-- pages/study-statistics/study-statistics.vue -->
<template>
  <view class="content">
    <view class="study-statistics-page">
      <!-- 自定义导航栏 -->
      <view class="custom-nav">
        <!-- 返回按钮 -->
        <view class="back-button" @tap="goToMyPage">
          <text class="back-icon">←</text>
        </view>
        <text class="nav-title">学习统计</text>
      </view>

      <!-- 学习概览卡片 -->
      <view class="overview-card">
        <view class="overview-title">本周学习概览</view>
        <view class="overview-data">
          <view class="data-item">
            <view class="data-value">{{ weeklyData.studyHours }}</view>
            <view class="data-label">学习时长(小时)</view>
          </view>
          <view class="data-item">
            <view class="data-value">{{ weeklyData.completedProblems }}</view>
            <view class="data-label">完成题目(道)</view>
          </view>
          <view class="data-item">
            <view class="data-value">{{ weeklyData.consecutiveDays }}</view>
            <view class="data-label">连续打卡(天)</view>
          </view>
        </view>
      </view>

      <!-- 每日学习时长统计 -->
      <view class="statistics-card">
        <view class="card-header">
          <view class="card-title">每日学习时长</view>
          <view class="card-subtitle">本周共计: {{ weeklyData.studyHours }}小时</view>
        </view>
        <view class="bar-chart">
          <view class="day-bar" v-for="(day, index) in dailyStudyHours" :key="index">
            <view class="bar" :style="{ height: (day.hours * 10) + 'rpx' }"></view>
            <view class="day-label">{{ day.name }}</view>
          </view>
        </view>
      </view>

      <!-- 做题统计 -->
      <view class="statistics-card">
        <view class="card-header">
          <view class="card-title">做题情况分析</view>
          <view class="card-subtitle">本周总计: {{ weeklyData.completedProblems }}题</view>
        </view>
        <view class="pie-chart-container">
          <view class="pie-chart">
            <!-- 实际项目中应使用组件或Canvas绘制饼图 -->
            <view class="pie-placeholder"></view>
            <view class="pie-center">{{ problemStats.correctPercentage }}%</view>
          </view>
          <view class="pie-legend">
            <view class="legend-item">
              <view class="legend-color correct"></view>
              <view class="legend-text">正确: {{ problemStats.correctCount }}题</view>
            </view>
            <view class="legend-item">
              <view class="legend-color wrong"></view>
              <view class="legend-text">错误: {{ problemStats.wrongCount }}题</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 学科分布 -->
      <view class="statistics-card">
        <view class="card-header">
          <view class="card-title">学科分布</view>
          <view class="card-subtitle">点击查看详情</view>
        </view>
        <view class="subject-list">
          <view class="subject-item" v-for="(subject, index) in subjects" :key="index" @tap="viewSubjectDetail(subject)">
            <view class="subject-info">
              <view class="subject-name">{{ subject.name }}</view>
              <view class="subject-count">{{ subject.count }}题</view>
            </view>
            <view class="subject-progress-bg">
              <view class="subject-progress" :style="{ width: subject.percentage + '%' }"></view>
            </view>
            <view class="subject-percentage">{{ subject.percentage }}%</view>
          </view>
        </view>
      </view>

      <!-- 学习效率分析（创新功能） -->
      <view class="statistics-card">
        <view class="card-header">
          <view class="card-title">学习效率分析</view>
          <view class="card-subtitle">基于AI的学习模式建议</view>
        </view>
        <view class="efficiency-container">
          <view class="efficiency-score">
            <view class="score-circle">
              <view class="score-value">{{ efficiencyScore }}</view>
            </view>
            <view class="score-label">效率得分</view>
          </view>
          <view class="efficiency-analysis">
            <view class="analysis-title">学习建议:</view>
            <view class="analysis-item" v-for="(suggestion, index) in studySuggestions" :key="index">
              <view class="analysis-icon">{{ suggestion.icon }}</view>
              <view class="analysis-text">{{ suggestion.text }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 同伴学习排行（与搭子打卡模块关联的创新功能） -->
      <view class="statistics-card">
        <view class="card-header">
          <view class="card-title">搭子学习排行</view>
          <view class="card-subtitle">查看与搭子的学习对比</view>
        </view>
        <view class="partner-ranking">
          <view class="ranking-item" v-for="(partner, index) in partners" :key="index" @tap="viewPartnerProfile(partner)">
            <view class="ranking-number">{{ index + 1 }}</view>
            <image class="partner-avatar" :src="partner.avatar || '/static/icons/user.png'" mode="aspectFill"></image>
            <view class="partner-info">
              <view class="partner-name">{{ partner.name }}</view>
              <view class="partner-hours">本周学习 {{ partner.hours }} 小时</view>
            </view>
            <view class="partner-badge" v-if="index === 0">👑</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-tab-bar">
      <view class="tab-item" 
            v-for="(item, index) in bottomNavItems" 
            :key="index"
            @tap="switchTab(index)">
        <image :src="currentTab === index ? item.activeIcon : item.icon" 
               mode="aspectFit" 
               class="tab-icon"></image>
        <text class="tab-text"
              :class="{ 'active': currentTab === index }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 设置导航栏样式
const setNavBarStyle = () => {
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#A8BF8F',
  })
}

// 返回我的页面
const goToMyPage = () => {
  uni.switchTab({
    url: '/pages/my/my',
    fail: (err) => {
      console.error('导航到我的页面失败：', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}

// 每周学习数据
const weeklyData = ref({
  studyHours: '14.5',
  completedProblems: '327',
  consecutiveDays: '5'
})

// 每日学习时长数据
const dailyStudyHours = ref([
  { name: '一', hours: 2.5 },
  { name: '二', hours: 1.8 },
  { name: '三', hours: 3.2 },
  { name: '四', hours: 2.0 },
  { name: '五', hours: 1.5 },
  { name: '六', hours: 2.0 },
  { name: '日', hours: 1.5 }
])

// 做题情况统计
const problemStats = ref({
  correctCount: 245,
  wrongCount: 82,
  correctPercentage: 75
})

// 学科分布数据
const subjects = ref([
  { name: '政治', count: 125, percentage: 38 },
  { name: '英语', count: 87, percentage: 27 },
  { name: '数学', count: 68, percentage: 21 },
  { name: '专业课', count: 47, percentage: 14 }
])

// 效率得分
const efficiencyScore = ref(86)

// 学习建议
const studySuggestions = ref([
  { icon: '⏰', text: '上午9:00-11:00是你的高效学习时段' },
  { icon: '📊', text: '可尝试25分钟学习+5分钟休息的模式' }
])

// 搭子排行数据
const partners = ref([
  { name: '张同学', hours: 16.5, avatar: '/static/images/avatar1.png' },
  { name: '我', hours: 14.5, avatar: '' },
  { name: '李同学', hours: 12.8, avatar: '/static/images/avatar2.png' },
  { name: '王同学', hours: 10.2, avatar: '/static/images/avatar3.png' }
])

// 状态变量
const currentTab = ref(1) // 假设学习统计在第二个标签

// 底部导航数据
const bottomNavItems = ref([
  { 
    icon: '/static/icons/politics.png',
    activeIcon: '/static/icons/politics.png', 
    text: '首页',
    url: '/pages/index/index'
  },
  { 
    icon: '/static/icons/练习.png',
    activeIcon: '/static/icons/练习.png', 
    text: '统计',
    url: '/pages/study-statistics/study-statistics'
  },
  { 
    icon: '/static/icons/home1.png',
    activeIcon: '/static/icons/home1.png', 
    text: '社区',
    url: '/pages/community/index'
  },
  { 
    icon: '/static/icons/user.png',
    activeIcon: '/static/icons/user.png', 
    text: '我的',
    url: '/pages/my/my'
  }
])

// 模拟获取学习数据
const fetchStudyData = () => {
  // 实际项目中这里可以从API获取数据
  uni.showLoading({
    title: '加载中'
  })
  
  setTimeout(() => {
    uni.hideLoading()
  }, 500)
}

// 查看学科详情
const viewSubjectDetail = (subject) => {
  uni.navigateTo({
    url: `/pages/subject-detail/subject-detail?subject=${subject.name}`,
    fail: () => {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  })
}

// 查看搭子资料
const viewPartnerProfile = (partner) => {
  if (partner.name === '我') return
  
  uni.navigateTo({
    url: `/pages/partner-profile/partner-profile?name=${partner.name}`,
    fail: () => {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  })
}

// 切换底部选项卡
const switchTab = (index) => {
  const item = bottomNavItems.value[index]
  currentTab.value = index
  
  uni.switchTab({
    url: item.url,
    fail: () => {
      uni.navigateTo({
        url: item.url,
        fail: () => {
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    }
  })
}

// 生命周期
onMounted(() => {
  setNavBarStyle()
  fetchStudyData()
})
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  padding-bottom: 120rpx; // 为底部导航留出空间
}

.study-statistics-page {
  background-color: #f5f5f5;
  padding: 20rpx;
  padding-bottom: env(safe-area-inset-bottom); // 适配底部安全区域
}

/* 导航栏 */
.custom-nav {
  width: 100%;
  height: 100rpx;
  background-color: #A8BF8F;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  
  .nav-title {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: bold;
  }
}

/* 返回按钮 */
.back-button {
  position: absolute;
  left: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:active {
    opacity: 0.8;
  }
}

.back-icon {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: bold;
}

/* 学习概览卡片 */
.overview-card {
  background-color: #A8BF8F;
  color: white;
  padding: 30rpx;
  border-radius: 0 0 30rpx 30rpx;
  margin-top: 100rpx; // 为导航栏留出空间
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.overview-title {
  font-size: 32rpx;
  margin-bottom: 30rpx;
}

.overview-data {
  display: flex;
  justify-content: space-around;
}

.data-item {
  text-align: center;
}

.data-value {
  font-size: 44rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.data-label {
  font-size: 24rpx;
}

/* 统计卡片通用样式 */
.statistics-card {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin: 30rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.card-header {
  margin-bottom: 30rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.card-subtitle {
  font-size: 24rpx;
  color: #888888;
  margin-top: 6rpx;
}

/* 柱状图样式 */
.bar-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 240rpx;
}

.day-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12%;
}

.bar {
  width: 40rpx;
  background-color: #A8BF8F;
  border-radius: 6rpx 6rpx 0 0;
}

.day-label {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666666;
}

/* 饼图样式 */
.pie-chart-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20rpx 0;
}

.pie-chart {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.pie-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#A8BF8F 0% 75%, #ff9494 75% 100%);
}

.pie-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #333333;
  font-size: 32rpx;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.legend-color {
  width: 24rpx;
  height: 24rpx;
  border-radius: 6rpx;
}

.legend-color.correct {
  background-color: #A8BF8F;
}

.legend-color.wrong {
  background-color: #ff9494;
}

.legend-text {
  font-size: 28rpx;
  color: #333333;
}

/* 学科分布样式 */
.subject-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.subject-item {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.subject-info {
  display: flex;
  justify-content: space-between;
}

.subject-name {
  font-size: 28rpx;
  color: #333333;
}

.subject-count {
  font-size: 24rpx;
  color: #888888;
}

.subject-progress-bg {
  height: 12rpx;
  background-color: #eeeeee;
  border-radius: 6rpx;
  overflow: hidden;
}

.subject-progress {
  height: 100%;
  background-color: #A8BF8F;
  border-radius: 6rpx;
}

.subject-percentage {
  text-align: right;
  font-size: 24rpx;
  color: #666666;
}

/* 学习效率分析样式 */
.efficiency-container {
  display: flex;
  gap: 30rpx;
}

.efficiency-score {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-circle {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background-color: #A8BF8F;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.score-value {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
}

.score-label {
  font-size: 24rpx;
  color: #666666;
}

.efficiency-analysis {
  flex: 1;
}

.analysis-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333333;
}

.analysis-item {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.analysis-icon {
  font-size: 32rpx;
}

.analysis-text {
  font-size: 24rpx;
  color: #666666;
}

/* 搭子排行样式 */
.partner-ranking {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.ranking-number {
  width: 40rpx;
  height: 40rpx;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #666666;
}

.ranking-item:nth-child(1) .ranking-number {
  background-color: #FFD700;
  color: white;
}

.ranking-item:nth-child(2) .ranking-number {
  background-color: #C0C0C0;
  color: white;
}

.ranking-item:nth-child(3) .ranking-number {
  background-color: #CD7F32;
  color: white;
}

.partner-avatar {
  width: 60rpx;
  height: 60rpx;
  background-color: #eeeeee;
  border-radius: 50%;
}

.partner-info {
  flex: 1;
}

.partner-name {
  font-size: 28rpx;
  color: #333333;
}

.partner-hours {
  font-size: 24rpx;
  color: #888888;
}

.partner-badge {
  font-size: 36rpx;
}

/* 底部导航栏样式 */
.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #eeeeee;
  padding-bottom: env(safe-area-inset-bottom); /* 适配底部安全区域 */
  z-index: 999; /* 确保导航栏在最上层 */
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); /* 添加顶部阴影效果 */
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
  position: relative; /* 为徽标定位做准备 */
  
  /* 点击效果 */
  &:active {
    opacity: 0.8;
  }
}

.tab-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
}

.tab-text {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.2;
  
  &.active {
    color: #A8BF8F; /* 使用主题色 */
    font-weight: bold;
  }
}

/* 适配iPhone底部安全区 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .bottom-tab-bar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .bottom-tab-bar {
    background-color: #1c1c1e;
    border-top-color: #2c2c2e;
  }
  
  .tab-text {
    color: #8e8e93;
    
    &.active {
      color: #A8BF8F;
    }
  }
}
</style>